

<div class="tabbable"> 
    <ul class="nav nav-tabs">
        <li class="active"><a href="#Base" data-toggle="tab">Diagramme de base</a></li>
        <li><a href="#Spe" data-toggle="tab">Diagramme spécifiques</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="Base">
			<div class="hero-unit">
					<h1 class="row-fluid" align="center">Statistiques</h1>
					<p class="row-fluid" align="center"><span rel="tooltip" data-original-title="Prenom" class="info_bulle">Prenom</span> Nom</p>
					
					<p class="row-fluid">Voici un exemple de diagramme de statistiques</p>
					<hr>
					<h3 class="row-fluid" align="center">Diagramme de base</h3>
					  
					<div class="row-fluid">
						<div class="span7">
						
						
							<script>
			
							google.load('visualization', '1', {packages: ['table', 'columnchart']});
			
							  function drawVisualization() {
							    var dataTable = google.visualization.arrayToDataTable([
							      ['Theme',   'Exo'],
							      ['History',   24],
							      ['Science',   52],
							      ['Technology', 16],
							      ['Nature',  72]
							    ]);
							  
							    var table = new google.visualization.Table(document.getElementById('table'));
							    table.draw(dataTable, null);
							  
							    var dataView = new google.visualization.DataView(dataTable);
							    dataView.setColumns([0, 1]);
							  
							    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
							    chart.draw(dataView, {width: 400, height: 200});
							  }
							  
			
							  google.setOnLoadCallback(drawVisualization);
							</script>
									
							<div>Table de Base</div>
						    <div id="table"></div>
						    <br />
						    <div>Diagramme de base</div>
						    <div id="chart"></div>
							 
							
						</div>
						<div class="span5">
							<h4 align = "center">Nombre total d'exercices: 110</h4>
							<hr>
							<h4 align = "center">Score moyen</h4>
							<ul>
								<li>Niveau facile: 17</li>
								<li>Niveau intermediaire: 15</li>
								<li>Niveau difficile: 14</li>
							</ul>
						</div>
		
					</div>
			
				



		
		
	  
					<hr>
					<div class="row-fluid">
						<div class="span12">
							<form method="post">
								<div class="span5">
								<fieldset>
									<legend>Nombres d'exercices par:</legend>
									<label for="theme"><input type="radio" name="diagramme" value="theme" id="theme" checked/>Theme</label>
									<label for="niveau"><input type="radio" name="diagramme" value="niveau" id="niveau"/>Niveau</label>
									<label for="score"><input type="radio" name="diagramme" value="score" id="score"/>Score</label>
									<label for="duree"><input type="radio" name="diagramme" value="duree" id="duree"/>Duree</label>
									
								</fieldset>
								</div>
								<div class="span5 offset1">
								<fieldset>
									<legend>Score obtenu par:</legend>
									
									<label for="theme2"><input type="radio" name="diagramme" value="theme2" id="theme2"/>Theme</label>
									<label for="niveau2"><input type="radio" name="diagramme" value="niveau2" id="niveau2"/>Niveau</label>
									<label for="duree2"><input type="radio" name="diagramme" value="duree2" id="duree2"/>Duree</label>
								</fieldset>
								</div>
							</form>
						</div>
					</div>
			</div>

		</div>


        <div class="tab-pane" id="Spe">
			<div class="hero-unit">
					<h1 class="row-fluid" align="center">Statistiques</h1>
					<p class="row-fluid" align="center"><span rel="tooltip" data-original-title="Prenom" class="info_bulle">Prenom</span> Nom</p>
					<p class="row-fluid">Voici un exemple de diagramme de statistiques spécifiques</p>
					<hr>
					
					<div class="row-fluid">
						<h3 class="row-fluid" align="center">Diagramme specifique</h3>
						<div class="span7">
						
						
							<script>
			
							google.load('visualization', '1', {packages: ['table', 'columnchart']});
			
							  function drawVisualization2() {
							    var dataTable = google.visualization.arrayToDataTable([
							      ['Theme',   'Exo'],
							      ['History',   24],
							      ['Science',   52],
							      ['Technology', 16],
							      ['Nature',  72]
							    ]);
							  
							    var table = new google.visualization.Table(document.getElementById('table2'));
							    table.draw(dataTable, null);
							  
							    var dataView = new google.visualization.DataView(dataTable);
							    dataView.setColumns([0, 1]);
							  
							    var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
							    chart.draw(dataView, {width: 400, height: 200});
							  }
							  
			
							  google.setOnLoadCallback(drawVisualization2);
							</script>
									
							<div>Table spécifique</div>
						    <div id="table2"></div>
						    <br />
						    <div>Diagramme spécifique</div>
						    <div id="chart2"></div>
							  
							
						</div>
					
		
					</div>
			
				
						
					<hr>
					<div class="row">
						
						<div class="span3">
							<form method="post">
							   <fieldset>
									<h4 class="row-fluid">Nombres d'exercices par:</h4>
								   <label for="Diagramme_avance">Niveau</label>
								   <select name="level_spe" id="level_spe">
									   <optgroup label="Niveau">
										   <option value="Tous_niveau">Tous</option>
										   <option value="Facile">Facile</option>
										   <option value="Intermediaire">Intermediaire</option>
										   <option value="Difficile">Difficile</option>
									   </optgroup>
									   
								   </select><br />
								   <label for="Diagramme_avance">Theme</label>
								   <select name="theme_spe" id="theme_spe">
									   <optgroup label="Theme">
										   <option value="Tous_theme">Tous</option>
										   <option value="Nature">Nature</option>
										   <option value="History">History</option>
										   <option value="Technology">Technology</option>
										   <option value="Science">Science</option>
									   </optgroup>
									   
								   </select><br />
								   <label for="Diagramme_avance">Score</label>
								   <select name="score_spe" id="score_spe">
									   <optgroup label="Score">
										   <option value="Tous_score">Tous</option>
										   <option value="moins-cinq">&lt 5 points</option>
										   <option value="cinq_dix">5-10 points</option>
										   <option value="dix_quinze">10-15 points</option>
										   <option value="plus_quinze">&gt 15 points</option>
									   </optgroup>
									   
								   </select><br />
								   
								   <label for="Diagramme_avance">Duree</label>
								   <select name="duree_spe" id="duree_spe">
									   <optgroup label="Duree">
										   <option value="Tous_duree">Tous</option>
										   <option value="zero-un">00' - 01'</option>
										   <option value="un_deux">01' - 02'</option>
										   <option value="deux_trois">02' - 03'</option>
										   <option value="trois_quatre">03' - 04'</option>
										   <option value="quatre_cinq">04' - 05'</option>
										   <option value="cinq_six">05' - 06'</option>
										   <option value="plus_six">&gt 06'</option>
									   </optgroup>
									   
								   </select>
							   </fieldset>
							</form>
						</div>
						
						<div class="span3 offset4">
							<form method="post">
							   <fieldset>
							       <h4>Score obtenu par:</h4>
								   <label for="Diagramme_avance">Niveau</label>
								   <select name="level_spe2" id="level_spe2">
									   <optgroup label="Niveau">
										   <option value="Tous_niveau">Tous</option>
										   <option value="Facile">Facile</option>
										   <option value="Intermediaire">Intermediaire</option>
										   <option value="Difficile">Difficile</option>
									   </optgroup>
									   
								   </select><br />
								   <label for="Diagramme_avance">Theme</label>
								   <select name="theme_spe2" id="theme_spe2">
									   <optgroup label="Theme">
										   <option value="Tous_theme">Tous</option>
										   <option value="Nature">Nature</option>
										   <option value="History">History</option>
										   <option value="Technology">Technology</option>
										   <option value="Science">Science</option>
									   </optgroup>
									   
								   </select><br />
								  
								   
								   <label for="Diagramme_avance">Duree</label>
								   <select name="duree_spe2" id="duree_spe2">
									   <optgroup label="Duree">
										   <option value="Tous_duree">Tous</option>
										   <option value="zero-un">00' - 01'</option>
										   <option value="un_deux">01' - 02'</option>
										   <option value="deux_trois">02' - 03'</option>
										   <option value="trois_quatre">03' - 04'</option>
										   <option value="quatre_cinq">04' - 05'</option>
										   <option value="cinq_six">05' - 06'</option>
										   <option value="plus_six">&gt 06'</option>
									   </optgroup>
									   
								   </select>
							   </fieldset>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		

</div>
       
	<script src="./javascript/profil.js" type="text/javascript"></script>
	<script src="./javascript/video.js"></script>